<template>
  <div class="change_table_box scroll_box">
    <div class=" change_table">
      <el-table
      :data="changeList"
      :span-method="objectSpeed"
      border
      :highlight-current-row="false"
      style="width: 100%;">
        <el-table-column
          prop="DecodeName"
          label="重点元素名称"
          width="280">
        </el-table-column>
        <el-table-column
          prop="Title"
          label="项目名称">
          <template slot-scope="scope">
            <p class="change_Title" @click="onClickOpen(scope.row.id)">{{ scope.row.Title }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="Ptype"
          label="建设情况"
          width="180">
        </el-table-column>
      </el-table>
    </div>

    <!-- 图表 -->
    <div class="echarts_box">
      <ChangeUseTableEcharts :data="echartsData1" id="1"></ChangeUseTableEcharts>
      <ChangeUseTableEcharts :data="echartsData2" id="2" name="按类型统计"></ChangeUseTableEcharts>
      <ChangeUseTableEcharts :data="echartsData3" id="3" name="按建设情况统计"></ChangeUseTableEcharts>
    </div>

  </div>
</template>

<script>
import ChangeUseTableEcharts from './ChangeUseTableEcharts.vue'
import {CHANGE_USE_INFO_TYPE} from '../data'

export default {
  name:'ChangeUseTable',
  data(){
    return{
      changeList:[],
      spanArr:[],
      echartsData1:[],
      echartsData2:[],
      echartsData3:[],
      typeList:CHANGE_USE_INFO_TYPE
    }
  },
  components:{
    ChangeUseTableEcharts
  },
  created(){
    this.getChangeList()
    this.getEcharts()//获取图表数据
  },
  methods:{
    getChangeList(){
      this.$api.getChangeTable({
        "AreaCode":"330104,330102"
      }).then(res=>{
        let arr = []
        res.data.data.forEach(i=>{
          /* if(i.decodeInfoZhlyList.length==0){
            arr.push({DecodeName:i.DecodeName,Title:'暂无',Ptype:'暂无'})
          } */
          i.decodeInfoZhlyList.forEach(d=>{
            arr.push({DecodeName:i.DecodeName,Title:d.Title,Ptype:this.getPtypeName(d.Ptype),id:d.id})
          })
        })
        this.changeList = arr
        this.getSpanArr(arr)
      })
    },
    getPtypeName(Ptype){
      return Ptype==='0'?'已建':Ptype==='1'?'在建':'规划'
    },

    //记录哪些列需要合并
    getSpanArr(data) {
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          if (data[i].DecodeName == data[i - 1].DecodeName) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1);
            this.pos = i
          }
        }
      }
    },
    objectSpeed({row, column, rowIndex, columnIndex}){
      //合并列
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
      //合并行
      if (row.isMark) {
        if (columnIndex > 1) {
          return [1, 6]
        } else {
          return [0, 0]
        }
      }
    },

    //获取图表数据
    getEcharts(){
      this.$api.getChangeTimeEcharts({
        "AreaCode":"330104,330102"
      }).then(res=>{
        this.echartsData1 = res.data.data
        return this.$api.getChangeTypeEcharts({
          "AreaCode":"330104,330102"
        })
      }).then(res=>{
        let arr = res.data.data
        arr.forEach((i,index)=>{
          i.key = this.typeList[index]
        })
        this.echartsData2 = res.data.data
        return this.$api.getChangePtypeEcharts({
          "AreaCode":"330104,330102"
        })
      }).then(res=>{
        let arr = res.data.data
        arr.forEach(i=>{
          i.key = i.key==='0'?'已建':i.key==='1'?'在建':'规划'
        })
        this.echartsData3 = arr
      })
    },
    //打开详情页
    onClickOpen(id){
      this.$emit('clickOpenChangeInfo',id)
    }
  }
}
</script>

<style scoped>
.change_table_box{
  height: 100%;
}
.change_table{
  width: 80%;
  height: 100%;
  float: left;
}
.echarts_box{
  width: 20%;
  height: 100%;
  float: right;
  padding: 0 20px;
  margin-top: 20px;
}
.change_Title{
  cursor: pointer;
}
</style>
